<template>
  <view>
    <view class="revice_address_row">
      <view class="user_info_row">
        <view class="user_info">
          <view>{{address.userName}}</view>
          <view>{{address.all}}</view>
        </view>
        <view class="user_phone">{{address.telNumber}}</view>
      </view>
    </view>

    <!-- 购物车内容 -->
    <view class="cart_content">
      <view class="cart_title">购物车</view>
      <view class="cart_main">
        <view class="cart_item" v-for="item in cart" :key="item.goods_id">
          <!-- 商品图片 -->
          <navigator class="cart_img_wrap">
            <image mode="widthFix" :src="item.goods_small_logo"></image>
          </navigator>
          <!-- 商品信息 -->
          <view class="cart_info_wrap">
            <view class="goods_name">{{item.goods_name}}</view>
            <view class="goods_price_wrap">
              <view class="goods_price">￥{{item.goods_price}}</view>
              <view class="cart_num_tool">
                <view class="goods_num">X {{item.num}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="footer_tool">
      <!-- 总价格 -->
      <view class="total_price_wrap">
        <view class="total_price">
          合计: <text class="total_price_text">￥{{totalPrice}}</text>
        </view>
        <view>包含运费</view>
      </view>
      <view class="order_pay_wrap" @click="handleOrderPay()">
        支付({{totalNum}})
      </view>
    </view>
  </view>
</template>

<script>
import {
  getSetting,
  chooseAddress,
  openSetting,
  showToast,
} from "../../utils/asyncWX";

export default {
  data() {
    return {
      address: {},
      cart: [],
      totalPrice: 0,
      totalNum: 0,
    };
  },
  onShow() {
    // 1 获取缓存中的收货地址信息
    const address = uni.getStorageSync("address");
    // 1 获取缓存中的购物车数据
    const cart = uni.getStorageSync("cart") || [];
    let checkedCart = cart.filter((v) => v.checked);
    this.address = address;
    this.setCart(checkedCart);
  },
  methods: {
    setCart(cart) {
      // 1 总价格 总数量
      let totalPrice = 0;
      let totalNum = 0;
      cart.forEach((v) => {
        totalPrice += v.num * v.goods_price;
        totalNum += v.num;
      });
      this.cart = cart;
      this.totalPrice = totalPrice;
      this.totalNum = totalNum;
      // this.address = address;
    },
    handleOrderPay() {
      try {
        // 1 判断缓存中有没有token
        const cart1 = this.cart;
        console.log(cart1, "?");
        if (cart1.length === 0) {
          uni.showLoading({
            title: "请先选择商品",
          });
          setTimeout(function () {
            uni.hideLoading();
          }, 3000);
        } else {
          let newCart = uni.getStorageSync("cart");
          newCart = newCart.filter((v) => !v.checked);
          uni.setStorageSync("cart", newCart);

          uni.showLoading({
            title: "购买成功",
          });
          setTimeout(function () {
            uni.hideLoading();
          }, 3000);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 4000);
        }
        const token = uni.getStorageSync("token");
        // 2 判断
        if (!token) {
          uni.navigateTo({
            url: "/pages/auth/auth",
          });
          return;
        }

        // 3 创建订单
        // 3.1 准备 请求头参数
        // const header = { Authorization: token };
        // 3.2 准备 请求体参数
        // const order_price = this.data.totalPrice;
        // const consignee_addr = this.data.address.all;
        // const cart = this.data.cart;
        // let goods = [];
        // cart.forEach((v) =>
        //   goods.push({
        //     goods_id: v.goods_id,
        //     goods_number: v.num,
        //     goods_price: v.goods_price,
        //   })
        // );
        // const orderParams = { order_price, consignee_addr, goods };
        // 4 准备发送请求 创建订单 获取订单编号
        // const { order_number } = await request({
        //   url: "/my/orders/create",
        //   method: "POST",
        //   data: orderParams,
        // });
        // // 5 发起 预支付接口
        // const { pay } = await request({
        //   url: "/my/orders/req_unifiedorder",
        //   method: "POST",
        //   data: { order_number },
        // });
        // // 6 发起微信支付
        // await requestPayment(pay);
        // // 7 查询后台 订单状态
        // const res = await request({
        //   url: "/my/orders/chkOrder",
        //   method: "POST",
        //   data: { order_number },
        // });
        // await showToast({ title: "支付成功" });
        // // 8 手动删除缓存中 已经支付了的商品
        // let newCart = wx.getStorageSync("cart");
        // newCart = newCart.filter((v) => !v.checked);
        // wx.setStorageSync("cart", newCart);
        // 8 支付成功了 跳转到订单页面
        // wx.navigateTo({
        //   url: "/pages/order/order",
        // });
      } catch (error) {
        // await showToast({ title: "支付失败" });
        uni.showLoading({
          title: "功能尚未开发",
        });
        setTimeout(function () {
          uni.hideLoading();
        }, 3000);
      }
      // console.log("111");
    },
  },
};
</script>

<style  lang="less" scoped>
.revice_address_row {
  .user_info_row {
    display: flex;
    padding: 20rpx;
    .user_info {
      flex: 5;
    }
    .user_phone {
      flex: 3;
      text-align: right;
    }
  }
}

.cart_content {
  .cart_title {
    padding: 20rpx;
    font-size: 36rpx;
    color: #f95314;
    border-top: 1rpx solid currentColor;
    border-bottom: 1rpx solid currentColor;
  }

  .cart_main {
    .cart_item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;

      .cart_img_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 80%;
        }
      }

      .cart_info_wrap {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        .goods_price_wrap {
          display: flex;
          justify-content: space-between;
          .goods_price {
            color: #f95314;
            font-size: 34rpx;
          }

          .cart_num_tool {
            display: flex;
            .goods_num {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

.footer_tool {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #ccc;

  .total_price_wrap {
    flex: 5;
    padding-right: 15rpx;
    text-align: right;
    .total_price {
      .total_price_text {
        color: #f95314;
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }

  .order_pay_wrap {
    flex: 3;
    background-color: #f95314;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
